<template>
  <view class="balance-detail-page">
    <image class="page-bg" src="/static/images/bg.png" mode="aspectFill" />
    <view class="gradient-bg" :style="{ top: navBarHeight + 'px' }"></view>
    <CustomNavbar title="费用明细变动" />
    
    <view class="page-content" :style="{ paddingTop: navBarHeight + 'px' }">
      <view class="user-info-section">
        <view class="user-phone">
          <text class="phone-number">{{ phoneNumber }}</text>
          <view class="date-picker" @click="showDatePicker">
            <image class="calendar-icon" src="/static/icons/icon-data.png" mode="aspectFit" />
            <text class="date-text">{{ currentDate }}</text>
          </view>
        </view>
        
        <view class="month-tabs">
          <view 
            class="tab-item" 
            v-for="(month, index) in monthTabs" 
            :key="index"
            :class="{ active: currentMonth === index }"
            @click="switchMonth(month, index)"
          >
            {{ month }}
          </view>
        </view>
        
      </view>
      
      <!-- 摘要卡片 -->
      <view class="summary-cards">
        <image class="bg-image" src="/static/images/bg3.png" mode="aspectFill" />
        <view class="summary-cards-wrapper">
          <view class="summary-card">
            <text class="card-title">缴费(元)</text>
            <text class="card-value">{{ paymentAmount }}</text>
          </view>
          <view class="summary-card">
            <text class="card-title">支出(元)</text>
            <text class="card-value">{{ expenseAmount }}</text>
          </view>
        </view>
      </view>
      
      <!-- 变动明细 -->
      <view class="detail-section">
        <view class="section-header">
          <view class="section-line"></view>
          <text class="section-title">变动明细</text>
        </view>
        <view class="detail-list">
          <view 
            class="detail-item" 
            v-for="(item, index) in detailList" 
            :key="index"
          >
            <view class="item-icon-wrapper">
              <view class="item-icon">
                <image v-if="item.type == '支出'"  src="/static/icons/icon-zhichu.png" alt=""/>
                <image v-else src="/static/icons/icon-jiaofei.png" alt=""/>
              </view>
            </view>
            <view class="item-content">
              <text class="item-type">{{ item.type }}</text>
              <text class="item-time">{{ item.time }}</text>
            </view>
            <text v-if="item.type == '支出'" class="item-amount-zhichu">{{ item.amount }}元</text>
            <text v-else class="item-amounti">{{ item.amount }}元</text>
          </view>
        </view>
      </view>
      
      <!-- 温馨提示 -->
      <view class="tips-section">
        <view class="section-header">
          <view class="section-line"></view>
          <text class="section-title">温馨提示</text>
        </view>
        <view class="tips-content">
          <text class="tips-text">尊敬的用户,当前显示的查询结果,可能会由于系统数据交换原因,出现数据延迟情况,敬请原谅.查询结果不作为缴费依据,仅供参考,实际需缴纳的费用以账单为准,如有疑问,请点击客服MM头像。</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import CustomNavbar from '@/components/CustomNavbar.vue'
import { api } from '@/utils/api'

const navBarHeight = ref(88)
const phoneNumber = ref('189*****0691')
const currentDate = ref((new Date().getMonth() + 1) + '月'+(new Date().getDate())+'日')
const currentMonth = ref(0)
const monthTabs = ref(['9月', '8月', '7月', '6月', '5月', '4月'])
const paymentAmount = ref('0.00')
const expenseAmount = ref('108.60')

const detailList = ref([
  {
    type: '支出',
    time: '2025-09-12 12:32:11',
    amount: '108.60'
  }
])

onMounted(() => {
  const windowInfo = uni.getWindowInfo()
  const statusBarHeight = windowInfo.statusBarHeight || 0
  navBarHeight.value = statusBarHeight + 44

  monthTabs.value = []
  for(let i=1; i<=(new Date().getMonth() + 1); i++){
    monthTabs.value.push(i + '月')
    // if(monthTabs.value[i] == (new Date().getMonth() + 1) + '月'){
    //   currentMonth.value = i
    // }
  }
  monthTabs.value.reverse()
  // monthTabs.value = monthTabs.value.slice(0, new Date().getMonth() + 1)

  getDetailData(monthTabs.value[currentMonth.value].replace('月', ''))
})

const getDetailData = async (month) => {
  api.getRechargeRecord({
    billingCycle:month,
    wxtype:'wxtype',
  }).then(res => {
    const data = res.data || {}
    
    paymentAmount.value = data.paymentList.countmoney.toFixed(2)
    expenseAmount.value =  (Number(data.totalAmount)/100).toFixed(2)
    detailList.value = []
    let items = {}
      items.type = '支出'
      items.amount = Number(data.totalAmount)/100
      let currentDate = new Date();
      let currentMonth = currentDate.getMonth() + 1
    
      let currentYear = (month>1&&month>currentMonth) ? (currentDate.getFullYear()-1) : currentDate.getFullYear()
    
      items.time = currentYear+'-'+(month>10 ? month : '0'+month)
      detailList.value.push(items)
    data.paymentList.list.forEach(item => {
      let items = {}
      items.type = '缴费'
      items.amount = item.paymentAmount
      items.time = item.stateDate
      detailList.value.push(items)
    })
    console.log('detailList = ', JSON.stringify(detailList.value))
  }).catch(err => {
    console.error('查询失败:', err)
  })
}

const showDatePicker = () => {
  // 显示日期选择器
  // uni.showToast({
  //   title: '日期选择功能',
  //   icon: 'none'
  // })
}
const switchMonth = (month, index) => {
  currentMonth.value = index
  console.log('切换月份:', month)
  // 这里可以添加获取对应月份数据的逻辑
  getDetailData(month.replace('月', ''))
}
</script>

<style scoped>
.balance-detail-page {
   
  position: relative;
  z-index: 1;
}

.page-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  pointer-events: none;
  object-fit: cover;
}

.gradient-bg {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  pointer-events: none;
}

.page-content {
  position: relative;
  z-index: 2;
  padding: 40rpx;
  padding-bottom: 40rpx;
}

/* 用户信息区域 */
.user-info-section {
  /* padding: 40rpx 32rpx 0 32rpx; */
  margin-top: 40rpx;
}

.user-phone {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 40rpx;
}

.phone-number {
  color: rgba(255, 255, 255, 1);
  font-family: HarmonyOS Sans SC;
  font-size: 32rpx;
  font-weight: 700;
  line-height: 38rpx;
}

.date-picker {
  display: flex;
  align-items: center;
  border-radius: 40px;
backdrop-filter: blur(8px);
background: linear-gradient(180.00deg, rgba(255, 255, 255, 0.9),rgba(222.26136779785156, 233.55055236816406, 255, 0.9) 20%,rgba(197, 217, 255, 0.9) 53%,rgba(227.102294921875, 236.72218322753906, 255, 0.9) 90%,rgba(255, 255, 255, 0.9) 100%);
  gap: 8rpx;
  padding: 8rpx 16rpx;
}

.calendar-icon {
  width: 32rpx;
  height: 32rpx;
}

.date-text {
  color: rgba(78, 138, 254, 1);
font-family: HarmonyOS Sans SC;
font-size: 28rpx;
font-weight: 500;
line-height: 32rpx;
}

/* 月份标签 */
.month-tabs {
  display: flex;
  justify-content: space-around;
  text-align: center;
  align-items: center;
  padding-left: 240rpx;
  margin-bottom: 30rpx;
  overflow-x: auto;
}

.tab-item {
  padding: 8rpx 16rpx;
  color: rgba(255, 255, 255, 0.8);
  font-family: HarmonyOS Sans SC;
  font-size: 32rpx;
  font-weight: 400;
  line-height: 38rpx;
  border-radius: 8rpx;
  white-space: nowrap;
}

.tab-item.active {
  border-radius: 20px;
  backdrop-filter: blur(8px);
  background: rgba(255, 255, 255, 1);
  color: rgba(78, 138, 254, 1);
}

/* 摘要卡片 */

.summary-cards {
  display: flex;
  align-items: center;
  flex-direction: column;
  z-index: 2;
  margin-bottom: 32rpx;
}
.bg-image {
   width: 670rpx;
  height: 158rpx;
}
.summary-cards-wrapper{
 position: absolute; 
 display: flex;
 align-items: center;
  justify-content: space-between;
  
}
.summary-card {
  border-radius: 16rpx;
  padding: 32rpx 100rpx;
  flex-direction: column;
  display: flex;
  align-items: center;
}


.card-title {
  color: rgba(255, 255, 255, 1);
  font-family: HarmonyOS Sans SC;
  font-size: 28rpx;
  font-weight: 400;
  line-height: 32rpx;
  margin-bottom: 16rpx;
}

.card-value {
  color: rgba(255, 255, 255, 1);
  font-family: HarmonyOS Sans SC;
  font-size: 48rpx;
  font-weight: 700;
  line-height: 56rpx;
}

/* 变动明细 */
.detail-section {
  margin-bottom: 40rpx;
}

.section-header {
  display: flex;
  align-items: center;
  margin-bottom: 24rpx;
}

.section-line {
  width: 8rpx;
  height: 40rpx;
  background: rgba(78, 138, 254, 1);
  border-radius: 4rpx;
  margin-right: 16rpx;
}

.section-title {
  color: rgba(51, 51, 51, 1);
font-family: HarmonyOS Sans SC;
font-size: 32rpx;
font-weight: 700;
line-height: 38rpx;
}

.detail-list {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.detail-item {
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 8rpx 8rpx 0px rgba(125, 182, 251, 0.1);
  border-radius: 16rpx;
  padding: 24rpx;
  display: flex;
  align-items: center;
  gap: 16rpx;
}

.item-icon-wrapper {
  flex-shrink: 0;
}

.item-icon {
  width: 64rpx;
  height: 64rpx;
  background: rgba(135, 206, 250, 0.3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-right: 16rpx;
}
.item-icon image{
  width: 100%;
  height: 100%;
}

.icon-house {
  font-size: 36rpx;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.icon-arrow {
  position: absolute;
  top: 8rpx;
  left: 50%;
  transform: translateX(-50%);
  font-size: 20rpx;
  color: rgba(255, 255, 255, 1);
  font-weight: bold;
  line-height: 1;
}

.item-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  /* gap: 8rpx; */
}

.item-type {
  color: rgba(51, 51, 51, 1);
  font-family: HarmonyOS Sans SC;
  font-size: 28rpx;
  font-weight: 400;
  line-height: 32rpx;
  margin-bottom: 16rpx;
}

.item-time {
  color: rgba(153, 153, 153, 1);
  font-family: HarmonyOS Sans SC;
  font-size: 24rpx;
  font-weight: 400;
  line-height: 28rpx;
}

.item-amount {
  color: rgba(78, 138, 254, 1);
  font-family: HarmonyOS Sans SC;
  font-size: 32rpx;
  font-weight: 500;
  line-height: 38rpx;
  flex-shrink: 0;
}

.item-amount-zhichu {
  color: rgba(255, 162, 56, 1);
  font-family: HarmonyOS Sans SC;
  font-size: 32rpx;
  font-weight: 500;
  line-height: 38rpx;
  flex-shrink: 0;
}

/* 温馨提示 */
.tips-section {
  margin-bottom: 40rpx;
}

.tips-content {
  /* background: rgba(255, 255, 255, 0.9); */
  /* border-radius: 16rpx; */
  /* padding: 24rpx; */
}

.tips-text {
  color: rgba(102, 102, 102, 1);
  font-family: HarmonyOS Sans SC;
  font-size: 24rpx;
  font-weight: 400;
  line-height: 36rpx;
}
</style>
